<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :md="18">
        <el-timeline>
          <el-timeline-item timestamp="2019/11/9" placement="top">
            <h3>版本：0.0.1</h3>
            <h4>前端</h4>
            <p>开发环境：nodejs、vscode、nginx</p>
            <p>项目依赖：外部vue、vue-router、vuex、element-ui，内部utils、components</p>
            <p>环境搭建：参考<el-link type="primary" href="https://note.youdao.com/ynoteshare1/index.html?id=8ba2116e6e5d775197c557a55982bf0c&type=note" target="_blank">前端环境搭建</el-link></p>
            <p>添加依赖库：yarn config set registry https://maven.bestvike.com/repository/group-npm/</p>
            <h4>后端</h4>
            <p>开发环境：jdk8、idea</p>
            <p>主要框架：spring boot、spring security、spring mvc、mybatis</p>
            <p>数据库：mariadb、redis</p>
            <p>环境搭建：安装mariadb，创建portal数据库及portal用户，导入数据（mysql -uportal -p portal &lt; portal.sql），下载地址：<el-link type="primary" href="http://note.youdao.com/noteshare?id=199d9e4ef65630180470b370f3a5e45a" target="_blank">后端环境搭建</el-link></p>
            <h4>特性</h4>
            <p>基于角色的权限管理</p>
            <p>后端对接口请求有鉴权</p>
            <p>路由在后端配置</p>
          </el-timeline-item>
        </el-timeline>
      </el-col>
      <el-col :md="6">
        <el-card>
          <h4>
            环境变量
            <bv-help>
              <h4>配置在.env[.xxx]文件中</h4>
              <p>.env（在所有的环境中被载入）</p>
              <p>.env.development（开发环境）</p>
              <p>.env.production（生产环境）</p>
              <p>.env.local（在所有的环境中被载入，但会被 git 忽略）</p>
              <p>.env.development.local（只在模式development中被载入，但会被 git 忽略）</p>
            </bv-help>
          </h4>
          <p>参考<el-link type="primary">https://cli.vuejs.org/zh/guide/mode-and-env.html</el-link></p>
          <p>VUE_APP_LOGINTYPE：登录方式，默认为passtoken，支持password-密码，passtoken-动态密码牌，both-同时使用密码和动态密码</p>
          <p>VUE_APP_ROOT：项目部署根路径，默认为/，对应vue.config.js中的publicPath，<el-link type="primary" href="https://cli.vuejs.org/zh/config/#publicpath" target="_blank">官方解释</el-link></p>
          <p>VUE_APP_BASE_API：API接口前缀，默认为/，会拼接到api接口的url前面</p>
          <p>VUE_APP_API_SERVER：后台服务地址，一般用于开发环境，测试及生产部署会通过nginx配置</p>
          <p>VUE_APP_FILE_SERVER：文件服务地址，一般用于开发环境，测试及生产部署会通过nginx配置</p>
          <p>VUE_APP_ERRORLOG：是否启用错误日志跟踪，通过sentry跟踪错误日志，一般用于生产环境</p>
          <p>VUE_APP_ANALYSIS：是否启用用户行为分析，通过matomo实现，一般用于生产环境</p>
          <p>VUE_APP_TRACK_HOST：用户行为分析服务地址</p>
          <p>VUE_APP_TRACK_SITEID：用户行为分析站点配置</p>
          <p>VUE_APP_MOCK：是否本地模拟数据，一般用于开发环境</p>
          <p>VUE_APP_THEME：系统皮肤，不支持动态换肤，只能预设</p>
        </el-card>
      </el-col>
      <el-col :md="6">
        <el-card>
          <h4>部署说明</h4>
          <p>建议使用yarn来管理包，常用命令：yarn（安装依赖）yarn add xxx（增加运行依赖）yarn add xxx --dev（增加开发依赖）yarn upgrade xxx（更新依赖）yarn global add xxx（全局安装依赖）</p>
          <p>开发运行yarn run local，读取.env.development.local配置</p>
          <p>生产发布到/路径下执行yarn run dist（配置在package.json）</p>
          <p>生产发布到/portal/路径下执行yarn run dist:portal（配置在package.json）</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { Timeline, TimelineItem } from 'element-ui'
  // import { getLodop } from '@/utils/print'
  export default {
    name: 'Dashboard',
    components: {
      ElTimeline: Timeline,
      ElTimelineItem: TimelineItem
    },
    data() {
      return {
      }
    }
    /*async created() {
      this.LODOP = await getLodop()
    },
    methods: {
      async print() {
        this.LODOP.ADD_PRINT_HTM(60, 180, 500, 50, 'xxxx')
        this.LODOP.PREVIEW()
      }
    }*/
  }
</script>
